<template>
  <div class="newSongs" ref="newSongs">
    <div class="w" v-if="list.length === 0">
      <el-skeleton animated :throttle="500">
        <template slot="template">
          <el-skeleton-item variant="image" style="height: 411px" />
        </template>
      </el-skeleton>
    </div>
    <div class="w box" v-else>
      <div class="box_left">
        <div class="box_title">
          <i
            v-for="item in $constant.NewSongsCategory"
            :key="item.type"
            :class="item.type === titleActive ? 'active' : null"
            @click="titleClick(item)"
            >{{ item.name }}</i
          >
        </div>
        <div class="newSongSuDi"></div>
        <div class="box_left_img">
          <GlobalImageDeep
            v-for="item in list.slice(0, 6)"
            :key="item.id"
            :url="item.album.picUrl"
            :imgWidth="159"
            :imgHeight="159"
          />

          <!-- <img :src="$constant.ImgError" alt="" /> -->
        </div>
      </div>

      <div class="box_right">
        <div class="box_right_item" v-for="item in list" :key="item.id">
          <div class="box_right_item_img">
            <!-- <el-image :src="item.album.picUrl">
              <div slot="error" class="imageError">
                <img :src="$constant.ImgError" />
              </div>
              <div slot="placeholder">
                <img :src="$constant.ImgNowLoading" />
              </div>
            </el-image> -->

            <GlobalImageDeep
              :url="item.album.picUrl"
              :imgWidth="85"
              :imgHeight="85"
            />
            <!-- 播放按钮 -->
            <GlobalPlayMask
              :maskWidth="40"
              :maskHeight="40"
              @maskClick="toPlayerPage(item.id)"
            />
          </div>
          <div class="box_right_item_info">
            <p
              class="one_txt_cut box_right_item_info_name"
              @click="toSongDetailsPage(item.id)"
            >
              {{ item.name }}
            </p>
            <p
              class="one_txt_cut box_right_item_info_author"
              @click="toSingerDetailsPage(item.artists[0].id)"
            >
              {{ item.artists[0].name }}
            </p>
          </div>
          <div class="box_right_item_time">
            {{ formatDuration(item.duration) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { getNewSongSuDi } from "../../../../../api/homeApi";
// 加载 观测 DOM 是否进入可视区的方法
import ObserverDomToScreen from "../../../../../utils/ObserverDomToScreen.js";
export default {
  name: "newSongs",
  components: {},
  data() {
    return {
      titleActive: 0,
      list: [],
    };
  },
  created() {
    // this.getNewSongSuDi();
  },
  mounted() {
    // console.log(this.$refs.newSongs);
    ObserverDomToScreen(this.$refs.newSongs, this.getNewSongSuDi);
  },
  methods: {
    titleClick({ type }) {
      // 切换标题
      this.titleActive = type;
      this.getNewSongSuDi();
    },
    formatDuration(duration) {
      return moment(duration).format("mm:ss");
    },
    async getNewSongSuDi() {
      try {
        const result = await getNewSongSuDi(this.titleActive);
        if (result.code === 200) {
          this.list = result.data.slice(0, 8);
          console.log("新歌速滴", this.list);
        }
      } catch (error) {}
    },
    toSongDetailsPage(id) {
      this.$router.push(`/songDetails/${id}`);
    },
    toSingerDetailsPage(id) {
      this.$router.push(`/singerDetails/${id}`);
    },
    // 去音乐播放页面
    toPlayerPage(id) {
      // 没用打开 player 窗口
      let link = this.$router.resolve({
        path: `/player/${id}`, //要跳转的路由
      });
      window.open(link.href, "player"); //打开新窗口
      // sessionStorage.setItem("open", true);
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
// /deep/ .el-image {
//   width: 85px;
//   height: 85px;
//   img {
//     width: 85px;
//     height: 85px;
//   }
// }
.newSongs {
  height: 411px;
  background-color: #f2f2f2;
  // 和上面 拉开距离
  margin-top: 110px;
  margin-bottom: 50px;

  .box {
    display: flex;
    .box_left {
      // 新歌速递的 左边
      position: relative;
      width: 335px;
      height: 495px;
      .newSongSuDi {
        position: absolute;
        z-index: 1;
        left: 0;
        top: -56px;
        width: 100%;
        // height: 100%;
        height: 495px;
        background: url("../../../../../assets/images/song_layer.png");
      }
      .box_left_img {
        position: absolute;
        width: 100%;
        z-index: 0;
        left: 0;
        top: -56px;
        padding: 8px;
        display: flex;
        flex-wrap: wrap;
        img {
          width: 159px;
          height: 159px;
        }
      }
      .box_title {
        position: absolute;
        left: 375px;
        top: -36px;
        height: 20px;
        width: 400px;
        font-size: 14px;
        i {
          margin-right: 20px;
          &:hover {
            cursor: pointer;
            color: @globalColor;
          }
          &.active {
            color: @globalColor;
          }
        }
      }
    }
    .box_right {
      margin-left: 40px;
      // width: 825px;
      flex: 1;
      height: 411px;
      padding: 15px 0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .box_right_item {
        display: flex;
        align-items: center;
        width: 49%;
        height: 85px;
        // background-color: red;
        margin-bottom: 10px;

        &:hover {
          /deep/ .playMask .play {
            display: block;
            cursor: pointer;
          }
        }

        &:nth-child(n + 7) {
          margin-bottom: 0;
        }
        &:hover {
          background-color: rgba(0, 0, 0, 0.05);
          // border-radius: 8px;
          // overflow: hidden;
        }
        .box_right_item_img {
          position: relative;
          overflow: hidden;
        }
        .box_right_item_time {
          width: 50px;
          text-align: center;
        }
        .box_right_item_info {
          flex: 1;
          padding: 5px;
          padding-left: 15px;
          .box_right_item_info_name {
            &:hover {
              cursor: pointer;
              color: @globalColor;
            }
          }
          .box_right_item_info_author {
            &:hover {
              cursor: pointer;
              color: @globalColor;
            }
          }
          p {
            font-size: 14px;
            width: 249px;
          }
          p:nth-child(1) {
            color: #333333;
          }
          p:nth-child(2) {
            margin-top: 10px;
            color: rgba(51, 51, 51, 0.4);
          }
        }
      }
    }
  }
}
</style>
